{% extends "tj3/tj3.html" %}

{% block navigation %}
<script>
	var chart;
	var table;
	var json_chart = new google.visualization.DataTable({{json_table|safe}}, 0.6);		      	
	var json_table = new google.visualization.DataTable({{json_table|safe}}, 0.6);		
	
	function drawChart() {	
      	chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
      	chart.draw(json_chart, {
      		height:600,
      		title:'{{type}}',
      		seriesType:"bars",
      		series: {2:{type:"line"}}
      	});
	}
	
	function drawTable() {
		table = new google.visualization.Table(document.getElementById('table_div'));
		table.draw(json_table, {showRowNumber: false, page:"enable"});
  	}
	
	$(document).ready(function() {
		// Turn radio buttons into a button set
		$("#radio").buttonset();

		// Buttonset event function
		$("#radio :radio").change(function(){
			var new_type=$(this).attr('id');
			
			{% if resource %}
				new_url = ['/tj3/resource/load',{{project.id}},{{resource.id}},{{s1.id}},{{s2.id}},new_type].join('/');						
			{% else %}
				new_url = ['/tj3/resource/load',{{project.id}},0,{{s1.id}},{{s2.id}},new_type].join('/');			
			{% endif %}
			window.location.replace(new_url);
			
			//if ($("input[@name='rdio']:checked").val() == 'a')
				// Code for handling value 'a'
			//else if ($("input[@name='rdio']:checked").val() == 'b')
				// Code for handling value 'b'
			//else
				// Code for handling 'c'
		});
		
		drawTable();
		drawChart();
	});	
</script>
{% endblock navigation %}

{% block content  %} 

<div>

	<h1 class="ui-state-highlight ui-corner-all">
		{{project.name}}
		<span class="float_right">Resource Load:
			{% if resource %}
				{{resource.first_name|capfirst}} {{resource.last_name|capfirst}}
			{% else %}
				All
			{% endif %}
		</span>
	</h1>
	<div id="radio">
		<input type="radio" name="type" id="daily" /><label for="daily">Daily</label>
		<input type="radio" name="type" id="weekly" /><label for="weekly">Weekly</label>
		<input type="radio" name="type" id="monthly" /><label for="monthly">Monthly</label>
		<input type="radio" name="type" id="quarterly" /><label for="quarterly">Quarterly</label>
	</div>
	
	
	<div id="chart_div"></div>
	
	
	<div id="table_div"></div>
	
	<div>
		<h1 class="ui-state-highlight ui-corner-all">Go To</h1>
		<ul>
			<li><a href="{% url project_main_plan project.id %}">Project Planning</a>
			<li>
			Execution Central:
			<a href="{% url project_main_actual project.id,s2.id %}">
			<font color=blue>{{s2.name|capfirst}}</font></a>
			<li>
			<a href="{% url project_performance project.id, s2.id %}">
			Other Performance Monitors</a>

		</ul>
	</div>
</div>

{% endblock content %}
